﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--登录界面-->

<div id="loginBox" class="loginBox">
    <form action="#">
        <label for="user"><input type="text" id="user"><span>用&nbsp;&nbsp;户</span></label>
        <label for="password"><input type="password" id="password"><span>密&nbsp;&nbsp;码</span></label>
        <input type="submit" value="登录">
        <input type="button" value="注册">
    </form>
</div>
<!--注册界面-->
<div id="register" class="register">
    <form action="#">
        <label for="regUser">
            <input type="text" id="regUser" autofocus>
            <span>用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户</span>
            <span class="false">至少包含4位字符</span>
        </label>
        <label for="screenName">
            <input type="text" id="screenName">
            <span>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</span>
            <span class="false">至少包含4位字符</span>
        </label>
        <label for="regPass">
            <input type="text" id="regPass">
            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
            <span class="false">至少包含4位字符</span>
        </label>
        <label for="regPass2">
            <input type="text" id="regPass2">
            <span>确认密码</span>
            <span class="false">两次密码不一致</span>
        </label>
        <div>
            <input type="submit" value="立即注册" id="regIn">
            <input type="button" value="取消" id="regCancel">
        </div>
    </form>
</div>
<!--信息记录-->
<div id="msg" class="msg">
    <h3>昵称：</h3>
    <div id="userName">小23</div>
    <h3>称号：</h3>
    <div id="title">无名小蛇</div>
    <h3>得分：</h3>
    <div id="score">12839</div>
    <h3>长度：</h3>
    <div id="length">5</div>
    <h3>当前速度：</h3>
    <div id="speed">1</div>
    <h3>个人记录</h3>
    <div id="high">0</div>
</div>
<!--游戏盒子-->
<div id="box" class="box">
    <ul class="col">
        <li></li>
    </ul>
    <ol id="snake" class="snake">
        <li class="header"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div id="mask" class="mask">
        <div class="btn">
            <div class="btn1">再来一次</div>
            <div class="btn2">查看排名</div>
        </div>
    </div>
    <!--排行榜-->
    <div id="rank" class="rank">
        <ul>
            <li>
                <span>第1名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">6888分</span>
            </li>
            <li>
                <span>第2名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">5888分</span>
            </li>
            <li>
                <span>第3名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">5888分</span>
            </li>
            <li>
                <span>第4名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">4888分</span>
            </li>
            <li>
                <span>第5名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">3888分</span>
            </li>
            <li>
                <span>第6名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">2888分</span>
            </li>
            <li>
                <span>第7名</span>
                <span class="rank_name">花花花花花</span>
                <span class="rank_score">1888分</span>
            </li>
        </ul>
    </div>
</div>
<audio id="mStart" src="./music/start.mp3"></audio>
<audio id="mGamming" src="./music/gamming.mp3"></audio>
<script src="js/index.js"></script>
</body>
</html>